<template>
  <div>
    <el-card class="box-card">
  <div slot="header" class="clearfix header">
    <span>教师管理 </span>
    <span>\</span>
    <i> 教师列表 </i>
    <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true" > 新增教师</el-button>
  </div>
  <div  class="text item">
    <!-- 学生信息搜索 -->
        <div class="search">
      <!-- 下拉框 -->
            <el-select v-model="search.type" placeholder="请选择" class="selected">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
        </el-select>
        <!-- 输入框 -->
        <el-input v-model="search.value" placeholder="请输入搜索内容" class="text"></el-input>
        <!-- 点击搜索 -->
        <el-badge class="item">
            <el-button size="small" class="btn" @click="searchTeachers">点击立即搜索教师</el-button>
        </el-badge>
        </div>
<!-- 教师信息 -->
    <el-table :data="teachersList" style="width: 100%">
   <!-- 教师编号    -->
      <el-table-column label="教师编号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row._id }}</span>
        </template>
      </el-table-column>
  <!-- 教师姓名 -->
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
  <!-- 教师所授专业 -->
      <el-table-column label="教师所授专业 " width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.subjectsId? scope.row.subjectsId.name : '暂无信息' }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
  <!-- 教师操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
<!-- 新增教师 -->          
            <el-dialog
              title="新增教师"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
              <p>
                <el-select v-model="newTeacher.subjectsId" placeholder="请选择" class="select">
                  <el-option
                    v-for="item in subjects"
                    :key="item._id"
                    :label="item.name"
                    :value="item._id">
                  </el-option>
                </el-select>
              </p>
              <p>
                <input type="text" placeholder="请输入要添加的教师名称" v-model="newTeacher.name"> 
              </p>
              <p>
                <el-button type="primary" @click="subjectAdd">点击新增</el-button>
              </p>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>               
              </span>
            </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[3, 5, 7, 9]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</el-card>

    

  </div>
</template>

<script>
  import {
    createNamespacedHelpers
  } from 'vuex';
  const {
    mapActions,
    mapState,
    mapMutations
  } = createNamespacedHelpers('Teachers');
  const { mapActions:subjectsMap } = createNamespacedHelpers('Subjects');

  export default {
    methods: {
      ...mapActions(['getTeachers', 'addTeachers']),
      ...mapMutations(['setPageSize','setCurrentPage']),
      ...subjectsMap(['getSubjects']),
      
      //---------------------------获取老师信息数据-------------------------
      async getTeachersList() {
        const data = await this.getTeachers();
        this.teachersList = data.data.result
      },
      //----------------------------获取专业信息数据----------------------------
      async getSubs(){
        const data = await this.getSubjects();
        this.subjects = data.data.result;
      },
      //-------------------------------每页显示几条班级数据--------------------------------
      async handleSizeChange(val) {
        this.setPageSize(val);
        this.getTeachersList();
      },
      //--------------------------------选择当前页数---------------------------------------
      handleCurrentChange(val) {
        this.setCurrentPage(val);
        this.getTeachersList();
       },
      //----------------------------新增教师--------------------------------------
      async subjectAdd(){
        const data = await this.addTeachers(this.newTeacher);
        if(data.code){
        this.$message({
          message: '新增成功！',
          type: 'success'
        });          
        }else{
        this.$message({
          message: '新增失败，数据错误，请稍后再试',
          type: 'success'
        });         
        }
        this.dialogVisible = false ;
        this.getTeachersList(); 
      },
      //----------------------------模态框关闭确认---------------------------
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //---------------------------修改教师信息---------------------------
      handleEdit(index, row) {
        console.log(index, row);
        this.$message({
          message: '暂无此权限！',
          type: 'success'
        });
      },
      //---------------------------删除教师信息---------------------------------
      handleDelete(index, row) {
        console.log(index, row);
        this.$message({
          message: '暂无此权限！',
          type: 'success'
        });
      },
      //---------------------------搜索教师-----------------------------------
      async searchTeachers(){
        const data = await this.getTeachers(this.search);
        this.teachersList = data.data.result
      },
    },
    computed:{
      ...mapState(['pageSize', 'currentPage', 'total', 'pages']),
    },
    data() {
      return {
        teachersList: [],
        //新增教师的模态框是否显示
        dialogVisible: false,
        //新增教师的信息
        newTeacher:{
          name:'',
          subjectsId:''
        },
        //获取专业信息数据
        subjects:[],
        //搜索教师的信息数据
        search: {
          type: 'name',
          value: '',
        },
        options: [
          {value: 'name',label: '姓名'}, 
          {value: 'age',label: '年龄' }, 
          {value: 'gender',label: '性别'} 
        ], 
      }
    },
    //------------获取教师数据-并挂载-----------
    mounted() {
      this.getTeachersList();
      this.getSubs();
    },
  }
</script>

<style scoped>
.header {
  text-align: left;
  font-size: 14px;
}
.header span {
  color: #666;
  cursor: pointer;
  padding: 0 10px;
}
.header i {
  color: black;
  font-weight: 600;
}
input{
  width: 300px;
  height: 35px;
  outline-color: greenyellow;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin: 0 5px;
  text-indent: 5px;
}
p {
  text-align: center;
}
.select {
  width: 305px;
  height: 35px;
}
p button {
  width: 150px;
}
.search {
  display: flex;
  margin-bottom: 20px;
  margin-left: 200px;
}
.search .text{
  width: 200px;
  margin: 0 10px;
}
.search .btn {
  height: 40px;
}
.search .selected {
  width: 150px;
}
</style>